<!--
 * @Date: 2023-03-08 18:35:35
 * @LastEditTime: 2023-03-09 10:34:16
 * @FilePath: /xing-qiu-da-zhan/src/components/rework/Rpopup.vue
 * 介绍:
-->
<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    overlay?: boolean;
    position?: "top" | "bottom" | "right" | "left" | "center";
    duration?: StrNumber;
    zIndex?: StrNumber;
    round?: boolean;
    lockScroll?: boolean;
    lazyRender?: boolean;
    closeOnPopstate?: boolean;
    closeOnClickOverlay?: boolean;
    closeable?: boolean;
    closeIcon?: string;
    closeIconPosition?:
      | "top-left"
      | "bottom-left"
      | "bottom-right"
      | "top-right";
    beforeClose?: (action: string) => boolean | Promise<boolean>;
    iconPrefix?: string;
    transition?: string;
    transitionAppear?: boolean;
    teleport?: string;
    safeAreaInsetTop?: boolean;
    safeAreaInsetBottom?: boolean;
  }>(),
  {
    closeOnClickOverlay: true,
    lazyRender: true,
    teleport: "body",
    overlay: true,
  }
);
const config = reactive({
  show: false,
});
defineExpose({ open, close });
function open() {
  config.show = true;
}
function close() {
  config.show = false;
}
const emit = defineEmits<{
  (e: "click-overlay", v: MouseEvent): void;
  (e: "click-close-icon", v: MouseEvent): void;
  (e: "open"): void;
  (e: "close"): void;
  (e: "opened"): void;
  (e: "closed"): void;
}>();
</script>

<template>
  <van-popup
    @click-overlay="(e) => emit('click-overlay', e)"
    @click-close-icon="(e) => emit('click-close-icon', e)"
    @open="(e) => emit('open')"
    @close="(e) => emit('close')"
    @opened="(e) => emit('opened')"
    @closed="(e) => emit('closed')"
    v-bind="props"
    v-model:show="config.show"
  >
    <slot></slot>
    <template #overlay-content>
      <slot name="overlay-content"></slot>
    </template>
  </van-popup>
</template>

<style lang="less" scoped></style>
